<template>
	<view class="knapsack">
		<comHead :title="$t('index.yhq')" :isLeft="true" :isRight="false"></comHead>
		<view class="tabs">
			<view class="item" v-for="(item,index) in arr" @click="changeTabs(index)">
				<text :class="active==index?'on':''">{{item}}</text>
			</view>
		</view>
		<view class="list">
			<text class="tit">{{$t('index.danxuan')}}</text>
			<radio-group name="dan">
				<view class="item" v-for="(item,index) in 2">
					<image class="bg" src="https://siha.vxmeng.com/static/index/coupon.png" mode="aspectFill"></image>
					<view class="box">
						<view class="l">
							<text>500</text>
							<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
						</view>
						<view class="m">
							<view class="t">
								<text>{{$t('index.500sidoudkq')}}</text>
								<text>{{$t('index.wmk')}}</text>
							</view>
							<view class="b">
								<text>2023/12/30~2024/5/1</text>
							</view>
						</view>
						<view class="r">
							<label>
								<radio :value="index" />
							</label>
						</view>
					</view>
				</view>
			</radio-group>
			<text class="tit">{{$t('index.kdj')}}</text>
			<checkbox-group name="">
				<view class="item" v-for="(item,index) in 2">
					<image class="bg" src="https://siha.vxmeng.com/static/index/coupon.png" mode="aspectFill"></image>
					<view class="box">
						<view class="l">
							<text>500</text>
							<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
						</view>
						<view class="m">
							<view class="t">
								<text>{{$t('index.500sidoudkq')}}</text>
								<text>{{$t('index.wmk')}}</text>
							</view>
							<view class="b">
								<text>2023/12/30~2024/5/1</text>
							</view>
						</view>
						<view class="r">
							<label>
								<checkbox :value="index" />
							</label>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<view class="btn">
			<text>{{$t('index.qd')}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userCoupon:[],
				arr: [this.$t('index.kyyhq'), this.$t('index.bkyyhq')],
				active: 1
			}
		},
		onShow() {
			this.getUserCoupon()
		},
		methods: {
			async getUserCoupon() {
				const res = await this.$myRequest({
					url: 'api/user/getUserCoupon',
					data: {
						type:1
					}
				})
				if (res.code == 1) {
					this.userCoupon = res.data
				}
			},
			changeTabs(index) {
				this.active = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.knapsack {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;

		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;

				text {
					display: inline-flex;
					color: #D8D8D8;
					font-size: 28rpx;
					// border-bottom: 4rpx solid rgba(#000,0);
					padding: 15rpx 0;
					position: relative;

					&::after {
						content: '';
						width: 50rpx;
						border-bottom: 4rpx solid rgba(#000, 0);
						position: absolute;
						left: calc(50% - 50rpx);
						bottom: 0;
					}

					&.on {
						color: #fff;
						font-size: 32rpx;
						// border-bottom: 4rpx solid #D8D8D8;

						&::after {
							content: '';
							width: 50rpx;
							border-bottom: 4rpx solid #D8D8D8;
							position: absolute;
							left: calc(50% - 50rpx);
							bottom: 0;
						}
					}
				}
			}
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.tit {
				width: 660rpx;
				display: inline-flex;
				color: #D8D8D8;
				font-size: 28rpx;
				padding: 30rpx 0;
			}

			.item {
				width: 660rpx;
				height: 144rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				position: relative;

				.bg {
					width: 100%;
					height: 100%;
				}

				.box {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					color: #D8D8D8;
					padding: 10rpx 30rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.l {
						display: flex;
						font-size: 56rpx;

						image {
							width: 24rpx;
							margin-left: 10rpx;
						}
					}

					.m {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						width: 60%;
						border-right: 2rpx dashed #eee;

						.t {
							font-size: 28rpx;
							display: flex;
							align-items: center;
							width: 90%;

							text {
								&:nth-child(1) {
									display: inline-flex;
									width: 80%;
								}

								&:nth-child(2) {
									background: rgba(216, 216, 216, 0.3);
									border-radius: 18px;
									color: #FFD673;
									font-size: 20rpx;
									margin-left: 20rpx;
									text-align: center;
									min-width: 90rpx;
								}
							}
						}

						.b {
							color: rgba(#D8D8D8, 0.3);
							font-size: 20rpx;
							margin-top: 20rpx;
						}
					}

					.r {

						/deep/uni-radio .uni-radio-input,
						/deep/uni-checkbox .uni-checkbox-input {
							background-color: rgba(#000, 0) !important;
							border: 4rpx solid #d1d1d1;
							border-radius: 50%;
						}

						/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
							border: 4rpx solid rgb(0, 122, 255);
						}

						/deep/uni-radio .uni-radio-input.uni-radio-input-checked:before {
							color: rgb(0, 122, 255) !important;
						}
					}
				}
			}
		}

		.btn {
			width: 480rpx;
			height: 80rpx;
			border-radius: 60rpx;
			background: linear-gradient(104deg, #00A6FE 20%, #854EFF 85%);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
			margin-top: 100rpx;
		}
	}
</style>
